<template>
	<view class="content">
		<view class="denglutitle">
			<text>帐号密码登录</text>
		</view>
		<view class="denglu">
			<view class="item">
				<input v-model="username" type="text" placeholder="请输入手机号码/邮箱" class="text" focus />
			</view>
			<view class="item jianju">
				<input v-model="password" type="password" placeholder="请输入密码" class="text" />
			</view>
			<view class="button" @click="checkUsername()">
				<text class="btxt">登录</text>
			</view>
			<view class="zhaohuimima">
				<text>找回密码</text>
			</view>
		</view>		
	</view>
</template>

<script>
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				username: '',
				password: ''				
			}
		},
		onLoad() {
			
		},
		methods: {
			// 将 this.login 映射为 this.$store.commit('login')
			...mapMutations({
				login: 'userlogin/login'
			}), 
			userLogin() {
				// 用户登录
				if(this.password == '')
				{
					uni.showToast({
					    title: '密码不能为空',
						icon: 'none',
					    duration: 2000
					});
					return false;
				}
				var url = 'https://www.yedushu.cn/api/login';
				uni.request({
				    url: url,
					method: 'post',
					data:{
						username: this.username,
						password: this.password
					},
				    success: (res) => {
						//  1,用户名字不存在
						//  2,密码错误
				        // console.log(JSON.stringify(res.data));
						if(res.data != 1 && res.data != 2)
						{
							// console.log('登录成功');
							// 登录成功后去执行仓库里的login方法。保存用户数据，存储在本地缓存
							this.login(res.data); 
							// 登录成功，跳转到会员中心
							uni.switchTab({
							    url: '../books/myself'
							});
						}
						else {
							uni.showToast({
							    title: '用户名或密码错误',
								icon: 'none',
							    duration: 2000
							});
						}
				    }
				});
			},
			checkUsername() {
				// 检查信箱和电话的合法性
				var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
				// 手机号码段 130~139  145,147 15[012356789] 176,170,177,178 180~189
				// var phone = /^0?(13[0-9]|15[012356789]|17[0678]|18[0-9]|14[57])[0-9]{8}$/;
				var phone = /^0?(12[0-9]|13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/;
				if( emailReg.test(this.username) || phone.test(this.username))
				{
					// console.log('输入了正确格式的信箱和手机号码');
					this.userLogin(); // 登录
					
				} else {
					// 提示输入正确格式的用户名字
					// uni.showToast({
					//     title: '请输入正确的手机号或信箱',
					//     duration: 2000
					// });
					uni.showModal({
					    title: '提示',
					    content: '请输入正确的手机号码或信箱',
						showCancel: false,
					    success: function (res) {
					        if (res.confirm) {
					            // console.log('用户点击确定');
					        }
					    }
					});
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		text-align: center;
		padding: 10px 10px;
	}
	.denglutitle {
		font-size: 26px;
		padding-top: 30px;
	}
	.denglu {
		display: flex;
		flex-direction: column;
		padding: 30px 30px 0 30px;
	}
	.denglu .item {
		background-color: #f4f4f4;
		padding: 10px 10px;
		border-radius: 5px;
	}
	.denglu .jianju {
		margin-top: 10px;
	}
	.denglu .text {
		font-size: 15px;
		text-align: left;
	}
	.denglu .button {
		margin-top: 30px;
		background-color: #4CD964;
		padding: 10px 10px;
		border-radius: 5px;
	}
	.denglu .btxt {
		font-size: 15px;
		color: #FFFFFF;
	}
	.denglu .zhaohuimima {
		text-align: right;
		margin-top: 10px;
		font-size: 13px;
		color: #4CD964;
	}

</style>
